<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:pe="http://primefaces.org/ui/extensions"
	template="/WEB-INF/templates/connected.xhtml">
	<ui:define name="content">
		<script type="text/javascript">
		PrimeFaces.locales ['fr'] = {
			    closeText: 'Fermer',
			    prevText: 'Précédent',
			    nextText: 'Suivant',
			    monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre' ],
			    monthNamesShort: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun', 'Jul', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc' ],
			    dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
			    dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
			    dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
			    weekHeader: 'Semaine',
			    firstDay: 1,
			    isRTL: false,
			    showMonthAfterYear: false,
			    yearSuffix:'',
			    timeOnlyTitle: 'Choisir l\'heure',
			    timeText: 'Heure',
			    hourText: 'Heures',
			    minuteText: 'Minutes',
			    secondText: 'Secondes',
			    currentText: 'Maintenant',
			    ampm: false,
			    month: 'Mois',
			    week: 'Semaine',
			    day: 'Jour',
			    allDayText: 'Toute la journée'
      			};
	</script>
		<h:form id="form">
			<p:panel id="panel">
				<p:messages id="messages" />
				<p:schedule value="#{rdvPlaningMbean.eventModel}" rightHeaderTemplate="agendaWeek, agendaDay" view="agendaWeek" slotMinutes="10" locale="fr"
					timeZone="UTC" draggable="false" resizable="false"
					timeFormat="hh:mm', columnFormat : {month : 'ddd',week : 'ddd d/M', day : 'dddd d/M'},titleFormat: {
    month: 'MMMM yyyy',day: 'dddd dd MMM yyyy'}, dummy:'"
					axisFormat="hh:mm" widgetVar="planingSearch">
					<p:ajax event="eventSelect" listener="#{rdvPlaningMbean.onEventSelect}" update="eventDetails" oncomplete="eventDialog.show()" />
				</p:schedule>
			</p:panel>
			<p:dialog widgetVar="eventDialog" header="Event Details" showEffect="clip" hideEffect="clip">
				<h:panelGrid id="eventDetails" columns="2">
					<h:outputLabel for="title" value="Title:" />
					<p:inputText id="title" value="#{rdvPlaningMbean.event.title}" required="true" />

					<h:outputLabel for="from" value="From:" />
					<p:inputMask id="from" value="#{rdvPlaningMbean.event.startDate}" mask="99/99/9999" readonly="true" >
						<f:convertDateTime pattern="dd/MM/yyyy" />
					</p:inputMask>

					<h:outputLabel for="Hdeb" value="To:" />
					<p:inputMask id="Hdeb" value="#{rdvPlaningMbean.event.startDate}" mask="99:99" readonly="true">
						<f:convertDateTime pattern="hh:mm" />
					</p:inputMask>
					<h:outputLabel for="Hfin" value="To:" />
					<p:inputMask id="Hfin" value="#{rdvPlaningMbean.event.endDate}" mask="99:99" readonly="true">
						<f:convertDateTime pattern="hh:mm" />
					</p:inputMask>

					<p:commandButton type="reset" value="Reset" onclick="eventDialog.hide()"/>
					<p:commandButton value="Save" actionListener="#{rdvPlaningMbean.takeRDV}" oncomplete="planingSearch.update();eventDialog.hide();" />
				</h:panelGrid>
			</p:dialog>
		</h:form>
	</ui:define>
</ui:composition>